<template>
  <div class="p-1 d-scroll listInner bg-white">
    <template v-if="type === 'rivers'">
      <custom-title :is-icon="true" title="基本信息" />
      <div class="baseInfo">
        <div v-for="(item, index) in baseInfo" :key="index + '1'">
          <custom-details-item :key="index" :icon="item.icon" :label="item.label" :value="item.value + ''" />
        </div>
      </div>
      <custom-title :is-icon="true" title="排查情况 => 已完成排查的河流岸线长度（公里）" class="my-2" />
      <div class="hlhaxLength">
        <div v-for="(item, index) in hlhaxLengthInfo" :key="index + '1'">
          <custom-details-item :key="index" :icon="item.icon" :label="item.label" :value="item.value + ''" />
        </div>
      </div>
      <custom-title :is-icon="true" title="排查情况 => 已完成排查的湖库长度（公里）" class="my-2" />
      <div class="hukuLength">
        <div v-for="(item, index) in hukuLengthInfo" :key="index + '1'">
          <custom-details-item :key="index" :icon="item.icon" :label="item.label" :value="item.value + ''" />
        </div>
      </div>
      <custom-title :is-icon="true" title="排查情况 => 排查核定的排污口数量（个）" class="my-2" />
      <div class="pchdpwkNum">
        <div v-for="(item, index) in pchdpwkNumData" :key="index + '1'">
          <custom-details-item :key="index" :icon="item.icon" :label="item.label" :value="item.value + ''" />
        </div>
      </div>
      <custom-title :is-icon="true" title="监测情况" class="my-2" />
      <div class="monitorSituation">
        <div v-for="(item, index) in monitorSituationData" :key="index + '1'">
          <custom-details-item :key="index" :icon="item.icon" :label="item.label" :value="item.value + ''" />
        </div>
      </div>
      <custom-title :is-icon="true" title="溯源情况" class="my-2" />
      <div class="traceabilitySituation">
        <div v-for="(item, index) in traceabilitySituationData" :key="index + '1'">
          <custom-details-item :key="index" :icon="item.icon" :label="item.label" :value="item.value + ''" />
        </div>
      </div>
      <custom-title :is-icon="true" title="整治情况" class="my-2" />
      <div class="remediationSituation">
        <div v-for="(item, index) in remediationSituationData" :key="index + '1'">
          <custom-details-item :key="index" :icon="item.icon" :label="item.label" :value="item.value + ''" />
        </div>
      </div>
    </template>
    <template v-else>
      <custom-title :is-icon="true" title="1. 排查阶段" />
      <div class="troubleshootingPhase">
        <div v-for="(item, index) in rhpwkData['pcjd']" :key="index + '1'">
          <custom-details-item :key="index" :icon="item.icon" :label="item.name" :value="item.value + ''" />
        </div>
      </div>
      <custom-title :is-icon="true" title="2. 监测阶段" class="my-2" />
      <div class="monitoringPhase">
        <div v-for="(item, index) in rhpwkData['jcjd']" :key="index + '1'">
          <custom-details-item :key="index" :icon="item.icon" :label="item.name" :value="item.value + ''" />
        </div>
      </div>
      <custom-title :is-icon="true" title="3. 溯源阶段" class="my-2" />
      <div class="traceabilityStage">
        <div v-for="(item, index) in rhpwkData['syjd']" :key="index + '1'">
          <custom-details-item :key="index" :icon="item.icon" :label="item.name" :value="item.value + ''" />
        </div>
      </div>
      <custom-title :is-icon="true" title="4. 整治阶段" class="my-2" />
      <div class="remediationPhase">
        <div v-for="(item, index) in rhpwkData['zzjd']" :key="index + '1'">
          <custom-details-item :key="index" :icon="item.icon" :label="item.name" :value="item.value + ''" />
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { getRhpwkjdglDetail, getRhpwkpczzDetail } from '@/api/special'
import CustomTitle from '@/components/globals/custom-title.vue'
import CustomDetailsItem from '@/components/globals/custom-details-item.vue'
import {
  baseInfo,
  hlhaxLengthInfo,
  hukuLengthInfo,
  monitorSituationData,
  pchdpwkNumData,
  remediationSituationData,
  traceabilitySituationData
} from '@/views/special/data'

export default {
  components: { CustomDetailsItem, CustomTitle },
  id: 'checkSituation',
  inject: ['layout'],
  props: {
    /**
     * 当前项
     */
    dataItem: {
      type: Object,
      default: () => {}
    },
    /**
     * 河流和入河排污口类型
     */
    type: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      // --------------------- 河流详情 --------------------
      baseInfo, // 河流基本信息
      hlhaxLengthInfo, // 河流海岸线长度
      hukuLengthInfo, // 排查情况 => 已完成排查的湖库长度（公里）
      pchdpwkNumData, // 排查情况 => 排查核定的排污口数量（个）
      monitorSituationData, // 监测情况
      traceabilitySituationData, // 溯源情况
      remediationSituationData, // 整治情况
      // ---------------------- 入河排污口详情 --------------------
      rhpwkData: {},
      apiUrl: {
        'rivers': getRhpwkpczzDetail,
        'rhpwk': getRhpwkjdglDetail
      } // 接口地址
    }
  },
  created() {
    this.$nextTick(() => {})
  },
  methods: {
    /**
     * 获取详情
     * @returns {Promise<void>}
     */
    async getListInfo() {
      try {
        let params
        this.type === 'rivers' ? params = { pkId: this.dataItem.pkId } : params = { id: this.dataItem.id }
        if (this.type && this.type === 'rivers') {
          this.layout.showAreaLoading(['.baseInfo', '.hlhaxLength', '.hukuLength', '.pchdpwkNum', '.monitorSituation', '.traceabilitySituation', '.remediationSituation'])
        } else {
          this.layout.showAreaLoading(['.troubleshootingPhase', '.monitoringPhase', '.traceabilityStage', '.remediationPhase'])
        }
        const { status, data } = await this.apiUrl[this.type](params)
        if (status === 0 && data) {
          if (this.type && this.type === 'rivers') {
            this.baseInfo.forEach(base => {
              base.fieldName === 'cityCounty' ? base.value = `${data['city']}${data['county']}` : base.value = data[base.fieldName]
            })
            this.hlhaxLengthInfo.forEach(item => {
              if (item.fieldName === 'hlqdjwd' || item.fieldName === 'hlzdjwd') {
                item.fieldName === 'hlqdjwd' ? item.value = `经度：${data[item['pcqkYwcpcHlqdjd']] ? data[item['pcqkYwcpcHlqdjd']] : ''} | 维度：${data[item['pcqkYwcpcHlqdwd']] ? data[item['pcqkYwcpcHlqdwd']] : ''}` : item.value = `经度：${data[item['pcqkYwcpcHlzdjd']] ? data[item['pcqkYwcpcHlzdjd']] : ''} | 维度：${data[item['pcqkYwcpcHlzdwd']] ? data[item['pcqkYwcpcHlzdwd']] : ''}`
              } else {
                item.value = data[item.fieldName]
              }
            })
            this.hukuLengthInfo.forEach(item => {
              if (item.fieldName === 'rlhrkjwd') {
                item.value = `经度：${data[item['pcqkYwcpcHlhrkjd']] ? data[item['pcqkYwcpcHlhrkjd']] : ''} | 维度：${data[item['pcqkYwcpcHlhrkwd']] ? data[item['pcqkYwcpcHlhrkwd']] : ''}`
              } else {
                item.value = data[item.fieldName]
              }
            })
            this.pchdpwkNumData.forEach(item => {
              item.value = data[item.fieldName]
            })
            this.monitorSituationData.forEach(item => {
              item.value = data[item.fieldName]
            })
            this.traceabilitySituationData.forEach(item => {
              item.value = data[item.fieldName]
            })
            this.remediationSituationData.forEach(item => {
              item.value = data[item.fieldName]
            })
            setTimeout(() => { this.layout.hideAreaLoading(['.baseInfo', '.hlhaxLength', '.hukuLength', '.pchdpwkNum', '.monitorSituation', '.traceabilitySituation', '.remediationSituation']) }, 200)
          } else {
            for (const rhpwk in data) {
              if (rhpwk) data[rhpwk].forEach(list => { list.icon = '&#xe61c;' })
            }
            this.rhpwkData = data
            setTimeout(() => { this.layout.hideAreaLoading(['.troubleshootingPhase', '.monitoringPhase', '.traceabilityStage', '.remediationPhase']) }, 200)
          }
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
